
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>广东实时地图监控</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <style>
        #mapContainer { width: 100%; height: 800px; }
    </style>
</head>
<body>
    <div id="mapContainer"></div>
    <script>
        const chart = echarts.init(document.getElementById('mapContainer'));
        
        // 1. 加载广东地图JSON数据
        $.get('https://geo.datav.aliyun.com/areas_v3/bound/440000_full.json', function(guangdongJson) {
            echarts.registerMap('guangdong', guangdongJson);
            
            // 2. 模拟实时数据更新
            function fetchData() {
                const now = new Date();
                const data = guangdongJson.features.map(feature => {
                    return {
                        name: feature.properties.name,
                        value: Math.round(Math.random() * 1000),
                        time: now.toLocaleTimeString()
                    };
                });
                
                updateChart(data);
                setTimeout(fetchData, 3000); // 每3秒更新
            }
            
            // 3. 图表配置
            function updateChart(data) {
                const option = {
                    title: {
                        text: '广东省实时数据监控',
                        subtext: '最后更新时间: ' + new Date().toLocaleString(),
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: params => {
                            return `${params.name}<br/>
                                    数值: ${params.value || 0}<br/>
                                    更新时间: ${params.data?.time || '未知'}`;
                        }
                    },
                    visualMap: {
                        min: 0,
                        max: 1000,
                        text: ['高', '低'],
                        realtime: false,
                        calculable: true,
                        inRange: {
                            color: ['#50a3ba', '#eac736', '#d94e5d']
                        }
                    },
                    series: [{
                        name: '实时数据',
                        type: 'map',
                        map: 'guangdong',
                        roam: true,
                        emphasis: {
                            label: { show: true }
                        },
                        data: data
                    }]
                };
                chart.setOption(option);
            }
            
            fetchData(); // 初始加载
        });
        
        window.addEventListener('resize', chart.resize);
    </script>
</body>
</html>
